import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import Swiper from 'react-native-swiper';
import { SwiperItem } from '@/store/home';
import LazyImage from '@/components/LazyImage';

export default function HomeSwiper(props: { swiperList: SwiperItem[]; activeCategoryId: number }) {
    const { swiperList, activeCategoryId } = props;
    // 提前找到与 activeCategoryId 匹配的 swiper 列表
    const activeCategory = swiperList.find((item: SwiperItem) => item.id === activeCategoryId);
    // 如果列表为空或找不到匹配项，直接返回空视图
    if (!activeCategory || !activeCategory.list?.length) {
        return <View style={{ height: 260 }} />;
    }
    return (
        <View style={{ height: 260 }}>
            <Swiper>
                {activeCategory.list.map((item: string) => (
                    <LazyImage 
                        uri={item} 
                        key={item} 
                        style={styles.swiperImage} 
                        defaultSource={require('@/assets/common/perch.png')} 
                    />
                ))}
            </Swiper>
        </View>
    );
}

const styles = StyleSheet.create({
    swiperImage: {
        width: '100%',
        height: '100%',
    },
});
